<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医院信息</title>
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>">
    <link  href="../../hos_manage/images/favicon.ico?cache=<%=Math.random()%>" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../../css/palace/hospital/hos_info_edit.css?a=<%=Math.random()%>">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../../js/distpicker.data.js"></script>
    <script src="../../js/distpicker.js"></script>
    <%--<script src="../../js/main.js"></script>--%>
</head>
<body id="app">
<%@ include file="../../header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="../../left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <!--右边导航下面内容-->
        <div class="tag-manage">
            <div class="title">
                <div class="address-left show-block note">
                    <span class="hover" @click="homePage()">首页</span>
                    <span class="left-distance">></span>
                    <span class="left-distance hover" @click="hosInfo()">医院信息</span>
                    <span class="left-distance">></span>
                    <span class="left-distance">编辑</span>
                </div>
            </div>
            <div class="containers">
                <div class="position">
                    <div class="show-block address-book-right">
                        <div class="data-form">
                            <div class="show-top">
                                <div class="show-block hos-left">医院名称</div>
                                <input class="show-block hos-input hos-right" type="text" v-model="hospital_name" placeholder="请输入医院名称(4到20位)">
                            </div>
                            <div class="show-top">
                                <div class="show-block hos-left">医院地址</div>
                                <div class="form-inline">
                                    <div id="distpicker5">
                                        <div class="form-group">
                                            <label class="sr-only" for="province10">Province</label>
                                            <select class="form-control" id="province10"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="city10">City</label>
                                            <select class="form-control" id="city10"></select>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="district10">District</label>
                                            <select class="form-control" id="district10"></select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="show-top">
                                <div class="show-block hos-left">详细地址</div>
                                <input class="show-block hos-input hos-right" type="text" v-model="address_detail" placeholder="请输入详细地址(不超过50位)">
                            </div>
                            <div class="show-top">
                                <div class="show-block hos-left">医院电话</div>
                                <input class="show-block hos-input hos-right" type="text" v-model="telephone" placeholder="请输入电话(不少于8位)">
                            </div>
                            <div class="show-top">
                                <div class="show-block hos-left textarea">医院简介</div>
                                <div class="show-block hos-right hos-intro">
                                    <textarea style="color: #999" class="hos-textarea" placeholder="请输入医院简介(20到10000字之间)" v-model="hospital_intro"></textarea>
                                </div>
                            </div>
                            <div style="text-align: center; margin-left: 12%">
                                <div class="save show-block" @click="save()">保存</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <dangertip v-if="dangerTipShow" :title="dangerTitle"></dangertip>
</div>
</body>
<%@ include file="/components/danger.jsp"%>
<script>
    $("#distpicker5").distpicker({
        autoSelect: false
    });
    new Vue({
        el: "#app",
        data: {
            dangerTitle: "",
            dangerTipShow: false,
            hospital_name: "",
            address_detail: "",
            telephone: "",
            hospital_intro: "",
            province_city_district: "",
            province: "",
            city: "",
            district: "",
        },
        events: {
            dangerTipOver: function() {
                this.dangerTipShow = false;
            },
        },
        methods: {
            danger: function(title) {
                this.dangerTitle = title;
                this.dangerTipShow = true;
            },
            hosInfo: function () {
                locationHerf("hos_info_show");
            },
            homePage: function () {
                location.href = "../../index.jsp";
            },
            save: function () {
                var self = this;
                var province = $("#province10 option:checked").text();
                var city = $("#city10 option:checked").text();
                var district = $("#district10 option:checked").text();
                district = district == "—— 区 ——" ? "" : district
                self.province_city_district = province + "|" + city + "|" + district;
                if (self.hospital_name.trim().length == 0) {
                    self.danger("请输入医院名称!");
                    return;
                }
                if (self.hospital_name.trim().length < 4 || self.hospital_name.trim().length > 20) {
                    self.danger("医院名称的长度在4到20位之间!");
                    return;
                }
                if (province == "—— 省 ——") {
                    self.danger("请选择省份!");
                    return;
                }
                if (city == "—— 市 ——") {
                    self.danger("请选择城市!");
                    return;
                }
                if (self.address_detail.trim().length == 0) {
                    self.danger("请输入详细地址!");
                    return;
                }
                if (self.address_detail.trim().length > 50) {
                    self.danger("详细地址长度不能超过50位");
                    return;
                }
                if (self.telephone.trim().length == 0) {
                    self.danger("请输入医院电话!");
                    return;
                }
                if (self.telephone != self.telephone.trim()) {
                    self.danger("电话前后不能有空格!");
                    return;
                }
                if (self.telephone.trim().length < 8) {
                    self.danger("电话长度不得少于8位!");
                    return;
                }
                if (/^(([\u4E00-\u9FA5]+)|([a-zA-Z]+))$/g.test(self.telephone)) {
                    self.danger("电话不能只包含中文或英文!");
                    return;
                }
                if (self.hospital_intro.trim().length == 0) {
                    self.danger("请输入医院简介!");
                    return;
                }
                if (self.hospital_intro.trim().length < 20 || self.hospital_intro.trim().length > 10000) {
                    self.danger("医院简介在20到10000字之间!");
                    return;
                }
                if (/^(\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F])/g) {
                    self.danger("医院简介不能输入表情!");
                    return;
                }
                $.ajax({
                    type: "post",
                    url: location.href,
                    data: {
                        act: "updateHospital",
                        hospital: "${user.hospital}",
                        name: self.hospital_name,
                        phone: self.telephone,
                        address_detail: self.address_detail,
                        introduction: self.hospital_intro,
                        address: self.province_city_district,
                    },
                    success: function (res) {
                        res = JSON.parse(res);
                        locationHerf("hos_info_show");
                    }
                });
            },
        },
        ready: function () {
            var self = this;
            $.ajax({
                type: "post",
                url: location.href,
                data: {
                    act: "showHospital",
                    hospital: "${user.hospital}",
                },
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.errcode == 0) {
                        self.hospital_name = res.data.name;
                        self.telephone = res.data.phone;
                        self.hospital_intro = res.data.introduction;
                        self.address_detail = JSON.parse(res.data.address).address_detail;
                        $("#province10").val(JSON.parse(res.data.address).province);
                        $("#province10").trigger("change");
                        $("#city10").val(JSON.parse(res.data.address).city);
                        $("#city10").trigger("change");
                        $("#district10").val(JSON.parse(res.data.address).district);
                    } else {

                    }
                }
            });
        },
        components: {
            dangertip: dangerTip,
        },
    });
</script>
</html>